<template>
  <div class="category-management">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <el-icon class="logo-icon"><School /></el-icon>
        <span class="system-title">在线教育系统</span>
      </div>
      <div class="header-right">
        <span class="welcome-text">欢迎，admin</span>
        <el-dropdown>
          <span class="user-dropdown">
            <el-icon><User /></el-icon>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container class="main-container">
      <!-- 左侧导航栏 -->
      <el-aside class="sidebar" width="240px">
        <el-menu
          default-active="category-management"
          class="sidebar-menu"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
        >
          <el-menu-item index="dashboard" @click="navigateTo('/dashboard')">
            <el-icon><House /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          
          <el-sub-menu index="user">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="student-management" @click="navigateTo('/student-management')">学生管理</el-menu-item>
            <el-menu-item index="teacher-management" @click="navigateTo('/teacher-management')">教师管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="course">
            <template #title>
              <el-icon><Reading /></el-icon>
              <span>课程管理</span>
            </template>
            <el-menu-item index="course-list">课程列表</el-menu-item>
            <el-menu-item index="course-add">添加课程</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="category-management" class="active-menu">
            <el-icon><Grid /></el-icon>
            <span>分类管理</span>
          </el-menu-item>

          <el-sub-menu index="order">
            <template #title>
              <el-icon><ShoppingCart /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="order-list">订单列表</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="finance">
            <template #title>
              <el-icon><Money /></el-icon>
              <span>财务管理</span>
            </template>
            <el-menu-item index="finance-record">财务记录</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="system">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="system-config">系统配置</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main class="main-content">
        <!-- 面包屑导航 -->
        <el-breadcrumb class="breadcrumb" separator="/">
          <el-breadcrumb-item>系统首页</el-breadcrumb-item>
          <el-breadcrumb-item class="active">分类管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索区域 -->
        <div class="search-section">
          <el-alert
            title="请注意：删除分类会同时删除该分类下的所有课程"
            type="warning"
            :closable="false"
            show-icon
            class="warning-alert"
          />
          
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item>
              <el-input
                v-model="searchForm.categoryName"
                placeholder="分类名称"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searchForm.categoryCode"
                placeholder="分类编号筛选"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searchForm.createTime"
                placeholder="创建时间筛选"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="addCategory">
                <el-icon><Plus /></el-icon>
                新增
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 数据表格 -->
        <div class="table-section">
          <el-table
            :data="categoryList"
            style="width: 100%"
            v-loading="loading"
            stripe
            border
          >
            <el-table-column prop="id" label="序号" width="80" align="center" />
            <el-table-column prop="categoryCode" label="分类编号" width="150" align="center" />
            <el-table-column prop="categoryName" label="分类编号" width="150" align="center" />
            <el-table-column prop="courseCount" label="课程数量" width="120" align="center" />
            <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
            <el-table-column label="操作" width="150" align="center" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="editCategory(scope.row)">
                  修改
                </el-button>
                <el-button type="danger" size="small" @click="deleteCategory(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-section">
          <div class="pagination-info">
            显示第1-6条结果，共6条
          </div>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <!-- 底部版权信息 -->
        <div class="footer">
          <p>Copyright © Assistants, All Rights Reserved.</p>
          <p>Email：1195193361@qq.com WeChat: zz1195193361</p>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User,
  ArrowDown,
  House,
  Reading,
  ShoppingCart,
  Money,
  Setting,
  Search,
  Plus,
  Grid,
  School
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(6)

// 搜索表单
const searchForm = reactive({
  categoryName: '',
  categoryCode: '',
  createTime: ''
})

// 分类列表数据
const categoryList = ref([
  {
    id: '001',
    categoryCode: '高中',
    categoryName: '高中',
    courseCount: 1,
    createTime: '2019-07-17 16:16:07'
  },
  {
    id: '002',
    categoryCode: '一年级',
    categoryName: '一年级',
    courseCount: 10,
    createTime: '2019-07-17 16:16:07'
  },
  {
    id: '003',
    categoryCode: '老师',
    categoryName: '老师',
    courseCount: 10,
    createTime: '2019-07-17 16:16:07'
  },
  {
    id: '004',
    categoryCode: '初中',
    categoryName: '初中',
    courseCount: 2,
    createTime: '2019-07-17 16:16:07'
  },
  {
    id: '005',
    categoryCode: '高中',
    categoryName: '高中',
    courseCount: 30,
    createTime: '2019-07-17 16:16:07'
  },
  {
    id: '006',
    categoryCode: '老师',
    categoryName: '老师',
    courseCount: 30,
    createTime: '2019-07-17 16:16:07'
  }
])

// 导航跳转
const navigateTo = (path) => {
  router.push(path)
}

// 退出登录
const logout = () => {
  ElMessage.success('退出登录成功')
  router.push('/')
}

// 搜索功能
const handleSearch = () => {
  loading.value = true
  // 模拟搜索请求
  setTimeout(() => {
    loading.value = false
    ElMessage.success('搜索完成')
  }, 1000)
}

// 新增分类
const addCategory = () => {
  ElMessage.info('打开新增分类对话框')
}

// 编辑分类
const editCategory = (row) => {
  ElMessage.info(`编辑分类：${row.categoryName}`)
}

// 删除分类
const deleteCategory = (row) => {
  ElMessageBox.confirm(
    `确定要删除分类 ${row.categoryName} 吗？删除后该分类下的所有课程也将被删除。`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  loadCategoryList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadCategoryList()
}

// 加载分类列表
const loadCategoryList = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 组件挂载时加载数据
onMounted(() => {
  loadCategoryList()
})
</script>

<style scoped>
.category-management {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 24px;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.welcome-text {
  font-size: 14px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-dropdown:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 主容器 */
.main-container {
  flex: 1;
  height: calc(100vh - 60px);
}

/* 侧边栏 */
.sidebar {
  background-color: #304156;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  border: none;
  height: 100%;
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
}

.sidebar-menu .el-sub-menu .el-menu-item {
  height: 45px;
  line-height: 45px;
  padding-left: 60px !important;
}

.active-menu {
  background-color: #409EFF !important;
  color: white !important;
}

/* 主要内容区域 */
.main-content {
  background: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
}

.breadcrumb {
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.breadcrumb .active {
  color: #409eff;
  font-weight: 600;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.warning-alert {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 表格区域 */
.table-section {
  margin-bottom: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 分页区域 */
.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

/* 底部版权信息 */
.footer {
  margin-top: 40px;
  text-align: center;
  color: #999;
  font-size: 12px;
  line-height: 1.5;
}

.footer p {
  margin: 5px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    padding: 0 10px;
  }
  
  .header-left .system-title {
    display: none;
  }
  
  .main-content {
    padding: 10px;
  }
  
  .search-form {
    flex-direction: column;
  }
  
  .pagination-section {
    flex-direction: column;
    gap: 15px;
  }
}
</style>